<template>
  <div class="approval-detail">
    <div class="form-container">
      <div class="approval-process">
        <div v-for="(step, index) in approvalSteps" :key="step.id">
          <div class="approval-step">
            <div class="step-left">
              <div class="step-icon">
                <van-icon
                  :name="getStepIcon(step.type)"
                  :class="['step-icon-inner', step.type]"
                />
              </div>
              <div
                class="step-line"
                v-if="index !== approvalSteps.length - 1"
              ></div>
            </div>
            <div class="step-content">
              <div class="step-info">
                <span class="step-name">{{ step.name }}</span>
                <span class="step-desc">{{ step.desc }}</span>
                <div
                  v-if="step.conditions && step.conditions.length"
                  class="condition-tabs"
                >
                  <div
                    v-for="condition in step.conditions"
                    :key="condition.id"
                    :class="[
                      'condition-tab',
                      { active: isActiveCondition(step, condition) },
                    ]"
                    @click="switchCondition(step, condition)"
                  >
                    <span class="condition-name">{{ condition.name }}</span>
                    <span class="condition-desc">{{ condition.desc }}</span>
                  </div>
                </div>
              </div>
              <div class="step-right">
                <template v-if="!['start','end','condition'].includes(step.type)">
                  <div v-if="step.approvers && step.approvers.length" class="approver-list avatar-stack">
                    <template v-if="step.approvers.length === 1">
                      <div class="approver-avatar-wrap single-approver">
                        <img
                          :src="step.approvers[0].avatar"
                          class="approver-avatar"
                          style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #ebedf0;background:#fff;display:block;margin-right:8px;box-sizing:border-box;"
                        />
                        <span class="approver-name single">{{ step.approvers[0].name }}</span>
                      </div>
                    </template>
                    <template v-else>
                      <div
                        v-for="(approver, idx) in step.approvers.slice(0, 2)"
                        :key="idx"
                        class="approver-avatar-wrap"
                        :style="{ left: (idx * 18) + 'px', zIndex: 10 - idx }"
                      >
                        <img
                          :src="approver.avatar"
                          class="approver-avatar"
                          style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #ebedf0;background:#fff;display:block;margin-right:8px;box-sizing:border-box;"
                        />
                      </div>
                      <div
                        v-if="step.approvers.length > 2"
                        class="approver-avatar-wrap more"
                        :style="{ left: (2 * 18) + 'px', zIndex: 8 }"
                        @click="showAllApprovers(step.approvers)"
                      >
                        <span class="approver-more">+{{ step.approvers.length - 2 }}</span>
                      </div>
                    </template>
                  </div>
                  <div v-else-if="step.selfSelect" class="approver-selector" @click="selectApprover(step)">
                    <span v-if="!getApproverCount(step.id)" class="select-tip">请选择</span>
                    <div v-else class="approver-list">
                      <div v-for="(approver, idx) in getApprovers(step.id)" :key="idx" class="approver-item">
                        <img
                          :src="approver.avatar"
                          class="approver-avatar"
                          style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #ebedf0;background:#fff;display:block;margin-right:8px;box-sizing:border-box;"
                        />
                        <span class="approver-name">{{ approver.name }}</span>
                      </div>
                    </div>
                  </div>
                  <div v-else class="approver-selector">
                    <span class="select-tip">请选择</span>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 人员弹窗 -->
    <van-dialog v-model="showApproverDialog" title="全部人员" show-cancel-button>
      <div class="all-approver-list">
        <div v-for="(approver, idx) in allApprovers" :key="idx" class="approver-item all-approver-item">
          <img
            :src="approver.avatar"
            class="approver-avatar"
            style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #ebedf0;background:#fff;display:block;margin-right:12px;box-sizing:border-box;"
          />
          <span class="approver-name all">{{ approver.name }}</span>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { parseApprovalNode, getBranchSteps } from "@/utils/approval";
import { Toast } from "vant";

export default {
  name: "flowPrediction",
  data() {
    return {
      approvalSteps: [],
      selectedApprovers: {},
      ready: false,
      conditionFlows: {},
      _approvalJson: null,
      activeConditionalBranches: {},
      fallbackBranchId: '',
      inputValues: {},
      showApproverDialog: false,
      allApprovers: [],
    };
  },
  created(options) {
    this.initPage();
    this.$watch(
      () => this.inputValues,
      (newValues) => {
        this.predictBranch();
      },
      { deep: true }
    );
  },
  props: {
    node: {
      type: Object,
      default: {},
    },
  },
  methods: {
    parseApprovalNode(node, activeConditionalBranches = {}) {
      const steps = [];
      let currentNode = node;
      while (currentNode) {
        const step = {
          id: currentNode.id,
          name: currentNode.name,
          type: this.getNodeType(currentNode.type),
          desc: this.getNodeDesc(currentNode),
          approvers: this.getApproversFromNode(currentNode),
          selfSelect: currentNode.config && currentNode.config.selfSelect && currentNode.config.selfSelect.multiple === true,
          conditions: currentNode.type === 4 ? this.getConditionsFromNode(currentNode) : [],
        };
        steps.push(step);
        if (currentNode.type === 4) {
          let branchToFollow = null;
          const branchId = activeConditionalBranches[currentNode.id];
          if (branchId) {
            branchToFollow = (currentNode.branchs || []).find(b => b.id === branchId);
          } else {
            branchToFollow = (currentNode.branchs || [])[0];
          }
          if (branchToFollow && branchToFollow.childNode) {
            let tempBranchNode = branchToFollow.childNode;
            while (tempBranchNode) {
              const branchStep = {
                id: tempBranchNode.id,
                name: tempBranchNode.name,
                type: this.getNodeType(tempBranchNode.type),
                desc: this.getNodeDesc(tempBranchNode),
                approvers: this.getApproversFromNode(tempBranchNode),
                selfSelect: tempBranchNode.config && tempBranchNode.config.selfSelect && tempBranchNode.config.selfSelect.multiple === true,
                conditions: tempBranchNode.type === 4 ? this.getConditionsFromNode(tempBranchNode) : [],
              };
              steps.push(branchStep);
              tempBranchNode = tempBranchNode.childNode;
            }
          }
          currentNode = currentNode.childNode;
        } else {
          currentNode = currentNode.childNode;
        }
      }
      steps.push({
        id: "end",
        name: "流程结束",
        type: "end",
        desc: "",
        approvers: [],
      });
      return steps;
    },
    initPage() {
      // const approvalJson = {
      //   id: "root",
      //   name: "发起人",
      //   type: 0,
      //   status: -1,
      //   childNode: {
      //     id: "node_517762875761",
      //     name: "审批人",
      //     type: 1,
      //     status: -1,
      //     content: "zhangsan",
      //     config: {
      //       assignedType: "ASSIGN_USER",
      //       approvalMode: "NEXT",
      //       nobody: {
      //         handler: "AUTO",
      //         assignedUser: [],
      //       },
      //       reject: {
      //         type: "TO_END",
      //         target: "",
      //       },
      //       leader: {
      //         level: 1,
      //       },
      //       role: [],
      //       assignedUser: [
      //         {
      //           id: "2",
      //           username: "zhangsan",
      //           password:
      //             "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //           avatar: "https://picsum.photos/200/200?random=2",
      //           introduction: null,
      //           roles: null,
      //           salt: "efgh",
      //           status: "正常",
      //           realName: "张三",
      //           email: "zhangsan@example.com",
      //           sex: "男",
      //           phone: "13900000002",
      //           deptId: "1",
      //           enable: "是",
      //           login: "是",
      //           createTime: "2025-06-06 17:55:46",
      //           createBy: "admin",
      //           updateTime: "2025-06-06 17:55:46",
      //           updateBy: "admin",
      //           remark: "技术部经理",
      //           lastTime: "2025-06-06 17:55:46",
      //         },
      //       ],
      //       selfSelect: {
      //         multiple: true,
      //       },
      //       levelMode: 1,
      //       approverIds: [],
      //       approverNames: [],
      //       formPerms: [
      //         {
      //           id: "field5vhnbo7l2bo0",
      //           name: "单行输入框",
      //           required: true,
      //           perm: "R",
      //         },
      //         {
      //           id: "fieldx2g3dcoqp8g",
      //           name: "多行输入框",
      //           required: true,
      //           perm: "R",
      //         },
      //         {
      //           id: "field6jy7m31mw240",
      //           name: "数字输入框",
      //           required: true,
      //           perm: "R",
      //         },
      //         {
      //           id: "field6s0s19w59po0",
      //           name: "下拉选择",
      //           required: true,
      //           perm: "R",
      //         },
      //         {
      //           id: "field2sliu7ifnma0",
      //           name: "签名",
      //           required: true,
      //           perm: "R",
      //         },
      //       ],
      //       configure: {},
      //       addable: true,
      //       deletable: false,
      //       error: false,
      //     },
      //     childNode: {
      //       id: "node_517842963578",
      //       name: "条件分支",
      //       type: 4,
      //       status: -1,
      //       childNode: {
      //         id: "node_518061234784",
      //         name: "审批人",
      //         type: 1,
      //         status: -1,
      //         content: "admin",
      //         config: {
      //           assignedType: "ASSIGN_USER",
      //           approvalMode: "NEXT",
      //           nobody: {
      //             handler: "AUTO",
      //             assignedUser: [],
      //           },
      //           reject: {
      //             type: "TO_END",
      //             target: "",
      //           },
      //           leader: {
      //             level: 1,
      //           },
      //           role: [],
      //           assignedUser: [
      //             {
      //               id: "1",
      //               username: "admin",
      //               password:
      //                 "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //               avatar: "https://picsum.photos/200/200?random=1",
      //               introduction: null,
      //               roles: null,
      //               salt: "abcd",
      //               status: "正常",
      //               realName: "管理员",
      //               email: "admin@example.com",
      //               sex: "男",
      //               phone: "13900000001",
      //               deptId: "1",
      //               enable: "是",
      //               login: "否",
      //               createTime: "2025-06-06 17:55:46",
      //               createBy: "system",
      //               updateTime: "2025-06-06 17:55:46",
      //               updateBy: "system",
      //               remark: "系统管理员",
      //               lastTime: "2025-06-06 17:55:46",
      //             },
      //           ],
      //           selfSelect: {
      //             multiple: true,
      //           },
      //           levelMode: 1,
      //           approverIds: [],
      //           approverNames: [],
      //           formPerms: [
      //             {
      //               id: "field5vhnbo7l2bo0",
      //               name: "单行输入框",
      //               required: true,
      //               perm: "R",
      //             },
      //             {
      //               id: "fieldx2g3dcoqp8g",
      //               name: "多行输入框",
      //               required: true,
      //               perm: "R",
      //             },
      //             {
      //               id: "field6jy7m31mw240",
      //               name: "数字输入框",
      //               required: true,
      //               perm: "R",
      //             },
      //             {
      //               id: "field6s0s19w59po0",
      //               name: "下拉选择",
      //               required: true,
      //               perm: "R",
      //             },
      //             {
      //               id: "field2sliu7ifnma0",
      //               name: "签名",
      //               required: true,
      //               perm: "R",
      //             },
      //           ],
      //           configure: {},
      //           addable: true,
      //           deletable: false,
      //           error: false,
      //         },
      //         childNode: {
      //           id: "node_518156848594",
      //           name: "抄送人",
      //           type: 2,
      //           status: -1,
      //           childNode: null,
      //           content: "admin,chengjing,zhangsan",
      //           config: {
      //             approverGroups: [
      //               {
      //                 id: "node_518156841616",
      //                 approverType: 1,
      //                 levelMode: 1,
      //                 approverIds: [],
      //                 approverNames: [],
      //               },
      //             ],
      //             formPerms: [
      //               {
      //                 id: "field5vhnbo7l2bo0",
      //                 name: "单行输入框",
      //                 required: true,
      //                 perm: "R",
      //               },
      //               {
      //                 id: "fieldx2g3dcoqp8g",
      //                 name: "多行输入框",
      //                 required: true,
      //                 perm: "R",
      //               },
      //               {
      //                 id: "field6jy7m31mw240",
      //                 name: "数字输入框",
      //                 required: true,
      //                 perm: "R",
      //               },
      //               {
      //                 id: "field6s0s19w59po0",
      //                 name: "下拉选择",
      //                 required: true,
      //                 perm: "R",
      //               },
      //               {
      //                 id: "field2sliu7ifnma0",
      //                 name: "签名",
      //                 required: true,
      //                 perm: "R",
      //               },
      //             ],
      //             configure: {},
      //             addable: true,
      //             deletable: false,
      //             error: false,
      //             assignedUser: [
      //               {
      //                 id: "1",
      //                 username: "admin",
      //                 password:
      //                   "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //                 avatar: "https://picsum.photos/200/200?random=1",
      //                 introduction: null,
      //                 roles: null,
      //                 salt: "abcd",
      //                 status: "正常",
      //                 realName: "管理员",
      //                 email: "admin@example.com",
      //                 sex: "男",
      //                 phone: "13900000001",
      //                 deptId: "1",
      //                 enable: "是",
      //                 login: "否",
      //                 createTime: "2025-06-06 17:55:46",
      //                 createBy: "system",
      //                 updateTime: "2025-06-06 17:55:46",
      //                 updateBy: "system",
      //                 remark: "系统管理员",
      //                 lastTime: "2025-06-06 17:55:46",
      //               },
      //               {
      //                 id: "19",
      //                 username: "chengjing",
      //                 password:
      //                   "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //                 avatar: "https://picsum.photos/200/200?random=19",
      //                 introduction: null,
      //                 roles: null,
      //                 salt: "uvwx",
      //                 status: "正常",
      //                 realName: "程静",
      //                 email: "chengjing@example.com",
      //                 sex: "女",
      //                 phone: "13900000019",
      //                 deptId: "1",
      //                 enable: "是",
      //                 login: "否",
      //                 createTime: "2025-06-06 17:55:46",
      //                 createBy: "zhangsan",
      //                 updateTime: "2025-06-06 17:55:46",
      //                 updateBy: "zhangsan",
      //                 remark: "技术部助理",
      //                 lastTime: "2025-06-06 17:55:46",
      //               },
      //               {
      //                 id: "2",
      //                 username: "zhangsan",
      //                 password:
      //                   "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //                 avatar: "https://picsum.photos/200/200?random=2",
      //                 introduction: null,
      //                 roles: null,
      //                 salt: "efgh",
      //                 status: "正常",
      //                 realName: "张三",
      //                 email: "zhangsan@example.com",
      //                 sex: "男",
      //                 phone: "13900000002",
      //                 deptId: "1",
      //                 enable: "是",
      //                 login: "是",
      //                 createTime: "2025-06-06 17:55:46",
      //                 createBy: "admin",
      //                 updateTime: "2025-06-06 17:55:46",
      //                 updateBy: "admin",
      //                 remark: "技术部经理",
      //                 lastTime: "2025-06-06 17:55:46",
      //               },
      //             ],
      //           },
      //           pid: "node_518061234784",
      //           error: false,
      //         },
      //         pid: "node_517842963578",
      //         error: false,
      //       },
      //       addable: true,
      //       branchs: [
      //         {
      //           id: "node_517842964485",
      //           pid: "node_517842963578",
      //           name: "分支1",
      //           type: 3,
      //           status: -1,
      //           childNode: {
      //             id: "node_517987727080",
      //             name: "审批人",
      //             type: 1,
      //             status: -1,
      //             content: "admin",
      //             config: {
      //               assignedType: "ASSIGN_USER",
      //               approvalMode: "NEXT",
      //               nobody: {
      //                 handler: "AUTO",
      //                 assignedUser: [],
      //               },
      //               reject: {
      //                 type: "TO_END",
      //                 target: "",
      //               },
      //               leader: {
      //                 level: 1,
      //               },
      //               role: [],
      //               assignedUser: [
      //                 {
      //                   id: "1",
      //                   username: "admin",
      //                   password:
      //                     "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //                   avatar: "https://picsum.photos/200/200?random=1",
      //                   introduction: null,
      //                   roles: null,
      //                   salt: "abcd",
      //                   status: "正常",
      //                   realName: "管理员",
      //                   email: "admin@example.com",
      //                   sex: "男",
      //                   phone: "13900000001",
      //                   deptId: "1",
      //                   enable: "是",
      //                   login: "否",
      //                   createTime: "2025-06-06 17:55:46",
      //                   createBy: "system",
      //                   updateTime: "2025-06-06 17:55:46",
      //                   updateBy: "system",
      //                   remark: "系统管理员",
      //                   lastTime: "2025-06-06 17:55:46",
      //                 },
      //               ],
      //               selfSelect: {
      //                 multiple: true,
      //               },
      //               levelMode: 1,
      //               approverIds: [],
      //               approverNames: [],
      //               formPerms: [
      //                 {
      //                   id: "field5vhnbo7l2bo0",
      //                   name: "单行输入框",
      //                   required: true,
      //                   perm: "R",
      //                 },
      //                 {
      //                   id: "fieldx2g3dcoqp8g",
      //                   name: "多行输入框",
      //                   required: true,
      //                   perm: "R",
      //                 },
      //                 {
      //                   id: "field6jy7m31mw240",
      //                   name: "数字输入框",
      //                   required: true,
      //                   perm: "R",
      //                 },
      //                 {
      //                   id: "field6s0s19w59po0",
      //                   name: "下拉选择",
      //                   required: true,
      //                   perm: "R",
      //                 },
      //                 {
      //                   id: "field2sliu7ifnma0",
      //                   name: "签名",
      //                   required: true,
      //                   perm: "R",
      //                 },
      //               ],
      //               configure: {},
      //               addable: true,
      //               deletable: false,
      //               error: false,
      //             },
      //             childNode: null,
      //             pid: "node_517842964485",
      //             error: false,
      //           },
      //           config: {
      //             branchType: 1,
      //             expression: "",
      //             priorityLevel: 1,
      //             showPriorityLevel: true,
      //             conditionGroup: [
      //               {
      //                 condition: "OR",
      //                 conditions: [
      //                   {
      //                     columnId: "姓名",
      //                     columnName: "姓名",
      //                     columnValue: "field6jy7m31mw240",
      //                     optType: "gt",
      //                     optTypeName: ["大于"],
      //                     valueType: "1",
      //                     conditionValue: "3",
      //                   },
      //                 ],
      //               },
      //             ],
      //             addable: true,
      //             deletable: false,
      //             error: false,
      //           },
      //           content: "[field6jy7m31mw240 大于 3]",
      //           error: false,
      //         },
      //         {
      //           id: "node_517842962307",
      //           pid: "node_517842963578",
      //           name: "其他情况",
      //           type: 3,
      //           status: -1,
      //           config: {
      //             conditionGroup: [],
      //             branchType: 1,
      //             expression: "",
      //             priorityLevel: 2,
      //             showPriorityLevel: true,
      //             childNode: null,
      //             addable: true,
      //             deletable: false,
      //             error: false,
      //             content: "其他情况进入此流程",
      //           },
      //         },
      //       ],
      //       pid: "node_517762875761",
      //     },
      //     pid: "root",
      //     error: false,
      //   },
      //   config: {
      //     formPerms: [
      //       {
      //         id: "field5vhnbo7l2bo0",
      //         name: "单行输入框",
      //         required: true,
      //         perm: "E",
      //       },
      //       {
      //         id: "fieldx2g3dcoqp8g",
      //         name: "多行输入框",
      //         required: true,
      //         perm: "E",
      //       },
      //       {
      //         id: "field6jy7m31mw240",
      //         name: "数字输入框",
      //         required: true,
      //         perm: "E",
      //       },
      //       {
      //         id: "field6s0s19w59po0",
      //         name: "下拉选择",
      //         required: true,
      //         perm: "E",
      //       },
      //       {
      //         id: "field2sliu7ifnma0",
      //         name: "签名",
      //         required: true,
      //         perm: "E",
      //       },
      //     ],
      //     configure: {},
      //     content: "",
      //     addable: true,
      //     error: false,
      //   },
      //   content: "已设置",
      // };
      const approvalJson = this.node;
      this._approvalJson = approvalJson;
      this.setFallbackBranchId();
      if (approvalJson.childNode && approvalJson.childNode.childNode && approvalJson.childNode.childNode.branchs) {
        this.$set(this.activeConditionalBranches, approvalJson.childNode.childNode.id, this.fallbackBranchId);
      }
      this.approvalSteps = this.parseApprovalNode(this._approvalJson, this.activeConditionalBranches);
      this.ready = true;
    },
    setFallbackBranchId() {
      const conditionalNode = this._approvalJson && this._approvalJson.childNode && this._approvalJson.childNode.childNode;
      if (conditionalNode && Array.isArray(conditionalNode.branchs)) {
        const emptyGroupBranches = conditionalNode.branchs.filter(
          (b) => !b.config || !b.config.conditionGroup || b.config.conditionGroup.length === 0
        );
        if (emptyGroupBranches.length > 0) {
          this.fallbackBranchId = emptyGroupBranches.reduce((min, b) =>
            (b.config && b.config.priorityLevel || Infinity) < (min.config && min.config.priorityLevel || Infinity)
              ? b
              : min
          ).id;
        } else {
          this.fallbackBranchId = conditionalNode.branchs[0].id;
        }
      }
    },
    switchCondition(step, condition) {
      if (this.activeConditionalBranches[step.id] === condition.id) return;
      this.$set(this.activeConditionalBranches, step.id, condition.id);
      this.approvalSteps = this.parseApprovalNode(this._approvalJson, this.activeConditionalBranches);
    },
    predictBranch() {
      const conditionalNode = this._approvalJson && this._approvalJson.childNode && this._approvalJson.childNode.childNode;
      let matchedBranchId = '';
      if (conditionalNode && Array.isArray(conditionalNode.branchs) && conditionalNode.branchs.length > 0) {
        for (const branch of conditionalNode.branchs) {
          const groups = branch.config && branch.config.conditionGroup || [];
          let branchMatched = false;
          for (const group of groups) {
            if (
              group.conditions &&
              group.conditions.length > 0 &&
              group.conditions.every((cond) => {
                const input = this.inputValues[cond.columnValue];
                return (
                  input !== undefined &&
                  input !== "" &&
                  this.checkCondition(input, cond.optType, cond.conditionValue)
                );
              })
            ) {
              branchMatched = true;
              break;
            }
          }
          if (branchMatched) {
            matchedBranchId = branch.id;
            break;
          }
        }
        this.$set(this.activeConditionalBranches, conditionalNode.id, matchedBranchId || this.fallbackBranchId);
        this.approvalSteps = this.parseApprovalNode(this._approvalJson, this.activeConditionalBranches);
      }
    },
    checkCondition(input, optType, target) {
      switch (optType) {
        case "eq":
          return input == target;
        case "gt":
          return Number(input) > Number(target);
        case "lt":
          return Number(input) < Number(target);
        default:
          return false;
      }
    },
    getNodeType(type) {
      const typeMap = {
        0: "start",
        1: "approve",
        2: "copy",
        3: "condition",
        4: "condition",
        5: "end",
      };
      return typeMap[type] || "start";
    },
    getNodeDesc(node) {
      switch (node.type) {
        case 0:
          return "发起本流程";
        case 1:
          const approverCount = node.config && node.config.assignedUser ? node.config.assignedUser.length : 0;
          const mode = node.config && node.config.approvalMode === "ALL" ? " (会签)" : "";
          if (node.config && node.config.approvalMode === "OR") {
            return approverCount + "人审批 (或签)";
          } else if (node.config && node.config.approvalMode === "NEXT") {
            return approverCount + "人审批 (按顺序)";
          }
          return approverCount + "人审批" + mode;
        case 2:
          const copyCount = node.config && node.config.assignedUser ? node.config.assignedUser.length : 0;
          const copyTip = copyCount === 0 ? ", 您可以添加抄送人" : "";
          return "抄送" + copyCount + "人" + copyTip;
        case 3:
          return node.content || (node.config && node.config.content) || "条件分支";
        case 4:
          return "只执行第一个满足的条件";
        case 5:
          return "流程结束";
        default:
          return "";
      }
    },
    getApproversFromNode(node) {
      if (!node.config || !node.config.assignedUser) return [];
      return node.config.assignedUser.map((user) => ({
        id: user.id,
        name: user.realName || user.username,
        avatar: user.avatar || "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      }));
    },
    getConditionsFromNode(node) {
      if (!node.branchs) return [];
      return node.branchs.map((branch) => ({
        id: branch.id,
        name: branch.name,
        desc: branch.content || (branch.config && branch.config.content) || "",
        expression: branch.config && branch.config.expression || "",
        priorityLevel: branch.config && branch.config.priorityLevel || 0,
      }));
    },
    getApproverCount(stepId) {
      return this.selectedApprovers[stepId] ? this.selectedApprovers[stepId].length : 0;
    },
    getApprovers(stepId) {
      return this.selectedApprovers[stepId] || [];
    },
    isActiveCondition(step, condition) {
      return this.activeConditionalBranches[step.id] === condition.id;
    },
    selectApprover(step) {
      Toast("选择人员...");
    },
    getStepIcon(type) {
      const icons = {
        start: "contact",
        approve: "manager",
        copy: "friends",
        end: "checked",
      };
      return icons[type] || "contact";
    },
    showAllApprovers(approvers) {
      this.allApprovers = approvers;
      this.showApproverDialog = true;
    },
  },
};
</script>
<style scoped>
.van-nav-bar {
  border-bottom: 0;
}

.van-hairline--bottom::after {
  border-bottom: 0;
}
</style>

<style scoped>
.approval-detail {
  /* padding-top: calc(44px + var(--20px, 20px)); */
  min-height: 100vh;
  background: var(--f5f5f5);
}

.approval-detail .van-nav-bar {
  background: var(--ffffff);
  padding-top: var(--20px, 20px);
  height: calc(44px + var(--20px, 20px));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.approval-detail .van-nav-bar .van-nav-bar__content {
  height: 44px;
}

.approval-detail .van-nav-bar .van-nav-bar__title {
  height: 44px;
  line-height: 44px;
}

.approval-detail .form-container {
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 120px);
  /* margin-top: 40px; */
}

.approval-detail .submit-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 40px calc(20px + env(safe-area-inset-bottom));
  background: var(--ffffff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.approval-detail .approval-process {
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  /* margin: 0 20px; */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.approval-detail .approval-process .approval-step {
  display: flex;
  position: relative;
  margin-bottom: 48px;
}

.approval-detail .approval-process .approval-step .step-left {
  position: relative;
  width: 14px;
  margin-right: 24px;
}

.approval-detail .approval-process .approval-step .step-left .step-icon {
  width: 24px;
  height: 24px;
  background: #f5f6f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.approval-detail .approval-process .approval-step .step-left .step-line {
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: -48px;
  width: 2px;
  background: #ebedf0;
}

.approval-detail .approval-process .approval-step .step-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 4px;
}

.approval-detail .approval-process .approval-step .step-content .step-info {
  flex: 1;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .step-name {
  font-size: 12px;
  color: #323233;
  margin-bottom: 8px;
  font-weight: 500;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .step-desc {
  font-size: 12px;
  color: #969799;
  line-height: 1.4;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .approver-selector {
  padding: 8px 16px;
  background: #f7f8fa;
  border-radius: 24px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab.active {
  background: #e8f3ff;
  border-color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab {
  padding: 12px 20px;
  background: #f7f8fa;
  border-radius: 24px;
  border: 1px solid #ebedf0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab
  .condition-name {
  font-size: 12px;
  color: #323233;
  margin-bottom: 4px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab.active
  .condition-name {
  color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab
  .condition-desc {
  font-size: 11px;
  color: #969799;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item:last-child {
  margin-bottom: 0;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  background: #f7f8fa;
  padding: 8px 16px;
  border-radius: 24px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item
  .approver-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  border: 1px solid #ebedf0;
  object-fit: cover;
  background: #fff;
  display: block;
  margin-right: 8px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item
  .approver-name {
  font-size: 12px;
  color: #323233;
  font-weight: 400;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.start {
  color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner {
  font-size: 14px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.approve {
  color: #07c160;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.condition {
  color: #ee0a24;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.end {
  color: #969799;
}

.all-approver-list {
  display: flex;
  flex-direction: column;
  padding: 16px 8px 8px 8px;
  align-items: center;
}

.all-approver-item {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto 10px auto;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.all-approver-item:last-child {
  border-bottom: none;
}

.approver-name.all {
  font-size: 15px;
  color: #323233;
  font-weight: 500;
  margin-left: 0;
  letter-spacing: 1px;
  line-height: 36px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.approver-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #ebedf0 !important;
  object-fit: cover !important;
  background: #fff !important;
  display: block !important;
  margin-right: 8px !important;
  box-sizing: border-box !important;
}

.avatar-stack {
  position: relative;
  height: 36px;
  min-width: 60px;
}

.approver-avatar-wrap {
  position: absolute;
  top: 0;
  transition: left 0.2s;
}

.approver-avatar-wrap.more {
  background: #f7f8fa;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1989fa;
  font-weight: bold;
  font-size: 16px;
  border: 1px solid #ebedf0;
  cursor: pointer;
}

.approver-list .approver-avatar,
.avatar-stack .approver-avatar,
.all-approver-list .approver-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #ebedf0 !important;
  object-fit: cover !important;
  background: #fff !important;
  display: block !important;
  margin-right: 8px !important;
  box-sizing: border-box !important;
}

.single-approver {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 80px;
}

.approver-name.single {
  font-size: 13px !important;
  color: #323233 !important;
  font-weight: 400 !important;
  margin-left: 8px !important;
  letter-spacing: 0 !important;
  line-height: 36px !important;
  white-space: nowrap !important;
  max-width: 60px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
}
</style>